<template>
  <div class="bg">
    <div class="bc">
      <div class="content-map">
        <Map2> </Map2>
      </div>
    </div>
    <div style="height: 5px;position: relative;z-index: 10;">
      <Header title="桥梁安全监测系统" />
    </div>
    <div class="content">
      <div class="content_left" ref="parentContainer">
        <dv-border-box12 ref="bobor13">
          <div class="left_inner">
            <div class="left_top">
              <lunbo />
            </div>
            <div small-bg>
              <dv-decoration6 style="width:100%;height:20px;margin-top: 10px;" />
            </div>
            <div class="left_center">
              <zhu />
            </div>
            <div small-bg>
              <dv-decoration6 style="width:100;height:20px;margin-top: 10px;" />
            </div>
            <div class="left_bottom">
              <huang />
            </div>
          </div>
        </dv-border-box12>
      </div>
      <div class="content_center" ref="centerp1">
        <dv-border-box12 ref="center1">
          <div class="center_top">
            <centertop />
          </div>
        </dv-border-box12>
      </div>
      <div class="content_right" ref="aaa">
        <dv-border-box12 ref="shouldRender1" v-if="videoList.length > 0">
          <div class="rr">
            <video class="video-player" :src="showList[0].url" controls preload="metadata" @click="playVideo($event)" loop autoplay muted></video>
          </div>
        </dv-border-box12>
        <dv-border-box12 ref="shouldRender2" v-if="videoList.length > 0">
          <div class="rr">
            <video class="video-player" :src="showList[1].url" controls preload="metadata" @click="playVideo($event)" loop autoplay muted></video>
          </div>
        </dv-border-box12>
        <dv-border-box12 ref="shouldRender3" v-if="videoList.length > 0">
          <div class="rr">
            <video class="video-player" :src="showList[2].url" controls preload="metadata" @click="playVideo($event)" loop autoplay muted></video>
          </div>
        </dv-border-box12>
        <dv-border-box12 ref="shouldRender0" v-if="videoList.length > 0">
          <div class="rr">
            <video class="video-player" :src="showList[3].url" controls preload="metadata" @click="playVideo($event)" loop autoplay muted></video>
          </div>
        </dv-border-box12>

        <div class="btu">
          <el-button type="primary" plain @click="more" style="background-color: rgba(0,0,0,.4);">查看更多视频</el-button>
        </div>
      </div>
      <el-dialog v-if="videoList.length > 0" :title="dig.title" v-model="dig.visible" style="background-color: rgba(0,0,0,0.1);" width="1500px">
        <div class="box">
          <div class="drap" v-for="(item, index) in videoList" :key="index">
            <video class="video-player" :src="item.url" controls preload="metadata" @click="playVideo($event)"></video>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import zhu from './zhu.vue';
import huang from './huang.vue'
import Map from './map.vue';
import Center from './center.vue'
import Header from '../../../components/headers/index.vue'
import Map2 from './map2.vue';
import lunbo from './lunbo.vue';
import diezhu from './diezhu.vue';
import centertop from './centertop.vue';
import { reactive, ref, onMounted, onBeforeUnmount, onUnmounted, watch } from 'vue';
import { BorderBox11 as DvBorderBox11, BorderBox12 as DvBorderBox12, BorderBox13 as DvBorderBox13 } from '@kjgl77/datav-vue3'
import { imgLists } from '@/api/swimming/plan/index'

const parentContainer = ref<HTMLDivElement | null>(null);
const borderBoxRef = ref<InstanceType<typeof DvBorderBox11> | null>(null);
const aaa = ref<HTMLDivElement | null>(null);
// const bobor3 = ref<InstanceType<typeof DvBorderBox12> | null>(null);
// const bobor1 = ref<InstanceType<typeof DvBorderBox12> | null>(null);
// const bobor2 = ref<InstanceType<typeof DvBorderBox12> | null>(null);
const bobor13 = ref<InstanceType<typeof DvBorderBox12> | null>(null);
const shouldRender0 = ref<InstanceType<typeof DvBorderBox13> | null>(null);
const shouldRender1 = ref<InstanceType<typeof DvBorderBox13> | null>(null);
const shouldRender2 = ref<InstanceType<typeof DvBorderBox13> | null>(null);
const shouldRender3 = ref<InstanceType<typeof DvBorderBox13> | null>(null);
const center1 = ref<InstanceType<typeof DvBorderBox12> | null>(null);
const center2 = ref<InstanceType<typeof DvBorderBox13> | null>(null);

const state = reactive({
    shouldRender: false
});

interface VideoData {
    id: string;
    aiVideoUrl: string;
}

interface ApiResponse {
    data: VideoData[];
}

const getList = async () => {
    try {
        await imgLists(); // 调用API但不使用返回值
        const mockData: ApiResponse = {
            data: [
                {
                    id: '1',
                    aiVideoUrl: '/视频/1.mp4'
                },
                {
                    id: '2',
                    aiVideoUrl: '/视频/2.mp4'
                },
                {
                    id: '3',
                    aiVideoUrl: '/视频/3.mp4'
                },
                {
                    id: '4',
                    aiVideoUrl: '/视频/4.mp4'
                }
            ]
        };
        videoList.splice(0);
        showList.splice(0);
        for (const item of mockData.data) {
            videoList.push({
                place: item.id,
                url: item.aiVideoUrl
            });
        }
        const displayCount = Math.min(videoList.length, 4);
        for (let j = 0; j < displayCount; j++) {
            showList.push(videoList[j]);
        }
        state.shouldRender = true;
    } catch (error) {
        console.error('获取视频列表失败:', error);
    }
}

const resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {
    for (const entry of entries) {
        if (entry.target === parentContainer.value) {
            bobor13.value?.initWH();
            shouldRender0.value?.initWH();
            shouldRender1.value?.initWH();
            shouldRender2.value?.initWH();
            shouldRender3.value?.initWH();
            borderBoxRef.value?.initWH();
            center1.value?.initWH();
            center2.value?.initWH();
        }
    }
});

const ress = new ResizeObserver((entries: ResizeObserverEntry[]) => {
    for (const entry of entries) {
        if (entry.target === aaa.value) {
            shouldRender0.value?.initWH();
            shouldRender1.value?.initWH();
            shouldRender2.value?.initWH();
            shouldRender3.value?.initWH();
        }
    }
});

const dig = reactive<DialogOption>({
    visible: false,
    title: ""
})

interface img {
    place: string,
    url: string
}

let intervalId = ref<number>();

const videoList = reactive<img[]>([]);
const showList = reactive<img[]>([]);

onMounted(() => {
    getList();

    if (parentContainer.value) {
        resizeObserver.observe(parentContainer.value as Element);
    }
    if (aaa.value) {
        ress.observe(aaa.value as Element);
    }

    //轮询
    intervalId.value = setInterval(() => {
        getList();
    }, 1000);
});

onBeforeUnmount(() => {
    if (parentContainer.value) {
        resizeObserver.unobserve(parentContainer.value as Element);
    }
    if (aaa.value) {
        ress.unobserve(aaa.value as Element);
    }
});
onUnmounted(() => {
    clearInterval(intervalId.value)
})

watch(() => state.shouldRender, (newVal) => {
    if (newVal) {
        state.shouldRender = false; // 重置 shouldRender
        // 手动触发重新渲染
        markRaw(state); // 将 state 对象标记为非响应式
    }
});

const more = () => {
    dig.title = "更多视频",
        dig.visible = true
}

const playVideo = (event: Event) => {
    const video = event.target as HTMLVideoElement;
    if(video.paused) {
        // 暂停其他所有视频
        document.querySelectorAll('video').forEach(v => {
            if(v !== video) {
                v.pause();
            }
        });
        video.play();
    } else {
        video.pause();
    }
}
</script>

<style lang="scss">
// .bg {
//     // width: 100%;
//     height: 100%;
//     box-sizing: border-box;
//     background-image: url("../../../assets/images/page_bg.png");
//     background-size: cover;
//     background-position: center center;
//     overflow: hidden;
// }

.bg {
    height: 100%;
    width: 100%;

    .content-map {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    .content {
        height: calc(100% - 80px);
        margin-top: 80px;
        display: flex;
        justify-content: space-around;
        box-sizing: border-box;
        padding: 1rem 2rem 2rem;


        .content_left {
            height: 90%;
            width: 20%;
            margin-top: 10px;
            margin-left: 10px;

            .left_inner {
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                border-radius: 10px;

                .left_top,
                .left_center,
                .left_bottom {
                    // padding: 30px;
                    width: 100%;

                    padding: 10px;
                    // height: 290px
                    height: calc(30% - 8px);
                }
            }
        }

        .content_center {
            height: 20%;
            width: 50%;
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            position: relative;
            z-index: 10;

            .center_top{
              padding: 10px;
              height:100%;
              width:100%;
              background-color: rgba(0, 0, 0, 0.8);
              border-radius: 10px;
            }

        }

        .content_right {
            height: 23%;
            width: 20%;
            margin-right: 10px;
            position: relative;
            z-index: 10;

            .rr {
                width: 100%;
                height: 100%;
                // height: 10%;
                // height: 25%;
                margin-top: 10px;
                padding: 10px;
            }
        }
    }

    .bc {
        box-sizing: border-box;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
    }

    .box {
        /* grid布局 两端对齐,最后一行左对齐*/
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        // grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 30px;

        .drap {
            // height: 300px;
            // width: 300px;
            height: 100%;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.1);
            aspect-ratio: 1 / 1;

        }
    }

    .btu {
        height: 10px;
        margin-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 10;
    }
}

.video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.box {
  .drap {
    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>
